<template>
  <div class="container">
    <div style="margin-bottom: 2vh">
      <div style="text-align: center;font-size: xxx-large;margin-bottom: 2vh">浇筑车间scada看板</div>
      <img :class="getIco('DY250910')" @click="bccelldblclick('DY250910')"/>
      <img :class="getIco('DY21507')" @click="bccelldblclick('DY21507')"/>
      <img :class="getIco('DY20986')" @click="bccelldblclick('DY20986')"/>
      <img :class="getIco('DY21506')" @click="bccelldblclick('DY21506')"/>
      <img :class="getIco('DY20985')" @click="bccelldblclick('DY20985')"/>
      <img :class="getIco('DY21508')" @click="bccelldblclick('DY21508')"/>
      <img :class="getIco('DY21509')" @click="bccelldblclick('DY21509')"/>
      <img :class="getIco('DY21375')" @click="bccelldblclick('DY21375')"/>
      <img :class="getIco('DY250909')" @click="bccelldblclick('DY250909')"/>
      <img :class="getIco('DY250908')" @click="bccelldblclick('DY250908')"/>
      <img :class="getIco('DY21511')" @click="bccelldblclick('DY21511')"/>
      <img :class="getIco('DY251784')" @click="bccelldblclick('DY251784')"/>
      <img :class="getIco('DY251785')" @click="bccelldblclick('DY251785')"/>
      <img :class="getIco('DY01617')" @click="bccelldblclick('DY01617')"/>
    </div>

    <div style="margin-left: 1vw">
      <span>DY250910</span>
      <span style="margin-left: 3vw">DY21507</span>
      <span style="margin-left: 3vw">DY20986</span>
      <span style="margin-left: 3.5vw">DY21506</span>
      <span style="margin-left: 3vw">DY20985</span>
      <span style="margin-left: 3.5vw">DY21508</span>
      <span style="margin-left: 3vw">DY21509</span>
      <span style="margin-left: 3.5vw">DY21375</span>
      <span style="margin-left: 3vw">DY250909</span>
      <span style="margin-left: 3vw">DY250908</span>
      <span style="margin-left: 2.5vw">DY21511</span>
      <span style="margin-left: 3vw">DY251784</span>
      <span style="margin-left: 3vw">DY251785</span>
      <span style="margin-left: 3vw">DY01617</span>
    </div>

    <div style="margin-top: 4.6vh">
      <el-row>
        <el-col :span="12"><div >
          <div style="padding-bottom: 2vh">
            <img src="../../../public/hydraulicPress/presswork.png" style="height: 30vh;width: 25vw"/>
            <img src="../../../public/hydraulicPress/presserr.png" style="height: 30vh;width: 25vw"/>
          </div>
          <div style="margin-left: 12vw"> <span>正常运行</span>   <span style="margin-left: 20vw">报警</span>  </div>
          <div style="margin-top: 2vh">
            <img src="../../../public/hydraulicPress/pressnoknow.png" style="height: 30vh;width: 25vw"/>
            <img src="../../../public/hydraulicPress/pressdown.png" style="height: 30vh;width: 25vw"/>
          </div>
          <div style="margin-left: 12vw;padding-bottom: 2vh"> <span>未采集</span>   <span style="margin-left: 20vw">关机</span>  </div>

        </div></el-col>
        <el-col :span="12"><div style="margin: 2vw">
          <div style="border: 1px solid rgba(255,255,255,0.89)">
            <div>
              <el-row>
                <el-col :span="8">
                  <div class="grid-content" style="text-align: left">

                    <div style="border-top: 1px solid #000000">
                      <div>
                        <el-row>
                          <el-col :span="12"></el-col>
                          <el-col :span="12"></el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="12"></el-col>
                          <el-col :span="12"></el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="12">
                            <div class="grid-content" style="margin: 0.4rem">设备:{{ deviceInfo.fmachNo }}<span/></div>
                          </el-col>
                          <el-col :span="12">
                            <div style="margin: 0.4rem">状态：{{deviceInfo.fmachState}}</div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="12">
                            <div class="grid-content" style="margin: 0.4rem">程序名称:{{ deviceInfo.fprogramNo }}<span/>
                            </div>
                          </el-col>
                          <el-col :span="12">
                            <div class="grid-content" style="margin: 0.4rem"><span v-if="deviceInfo.fworkNumTime > 0">总加工时间:{{
                                deviceInfo.fworkNumTime
                              }}小时</span><span/>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="12">
                            <div class="grid-content" style="margin: 0.4rem">主轴转速:{{ deviceInfo.fbearSpeed }}<span/>
                            </div>
                          </el-col>
                          <el-col :span="12">
                            <div class="grid-content" style="margin: 0.4rem">进给速度:{{ deviceInfo.floadSpeed }}<span/>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="12">
                            <div class="grid-content" style="margin: 0.4rem">报警号:{{ deviceInfo.fwarningNo }}<span/>
                            </div>
                          </el-col>
                          <el-col :span="12">
                            <div class="grid-content" style="margin: 0.4rem">报警类型:{{ deviceInfo.fwarningType }}<span/>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="24">
                            <div class="grid-content" style="margin: 0.4rem">报警详细信息:{{ deviceInfo.fwarningMsg }}<span/>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="12">
                            <div class="grid-content" style="margin: 0.4rem">X轴相对位置:{{ deviceInfo.fcoorRelPosX }}<span/>
                            </div>
                          </el-col>
                          <el-col :span="12">
                            <div class="grid-content" style="margin: 0.4rem">X轴绝对位置:{{ deviceInfo.fcoorAbsPosX }}<span/>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="12">
                            <div class="grid-content" style="margin: 0.4rem">Y轴相对位置:{{ deviceInfo.fcoorRelPosY }}<span/>
                            </div>
                          </el-col>
                          <el-col :span="12">
                            <div class="grid-content" style="margin: 0.4rem">Y轴绝对位置:{{ deviceInfo.fcoorAbsPosY }}<span/>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="12">
                            <div class="grid-content" style="margin: 0.4rem">Z轴相对速度:{{ deviceInfo.fcoorRelPosZ }}<span/>
                            </div>
                          </el-col>
                          <el-col :span="12">
                            <div class="grid-content" style="margin: 0.4rem">Z轴绝对位置:{{ deviceInfo.fcoorAbsPosZ }}<span/>
                            </div>
                          </el-col>
                        </el-row>
                      </div>

                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content" style="border: 1px solid #000000">
                    <SimEcharts :chart-data="gaugeDataleft"/>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content" style="border: 1px solid #000000">
                    <SimEcharts :chart-data="gaugeDataright"/>
                  </div>
                </el-col>

              </el-row>
            </div>
            <div><SimEcharts :chart-data="basicLineData" style="height: 300px;margin-bottom: -2rem"/></div>
          </div>

        </div></el-col>
      </el-row>


      </div>


  </div>
</template>

<script>
import {
  gaugeData,
  basicLineData
} from '../../api/service-module/dashBoard/echartsData'
import {
  queryDeviceFromSCADA
} from '../../api/service-module/report/MesScadaReport'
import {closeWebsocket, connectWebsocket, sendMessage} from "@/api/websocket";
export default {
  name: "PouringDevice",
  data(){
    return{
      deviceData:'',
      tmp: '',
      messages: '',
      notifyPromise: Promise.resolve(),
      myTime: '',
      //  下面五个对应设备总数上6个值
      a1: 0,
      a2: 0,
      a3: 0,
      a4: 0,
      a5: 0,
      a6: 0,
      basicLineData: JSON.parse(JSON.stringify(basicLineData)),
      gaugeDataleft: JSON.parse(JSON.stringify(gaugeData)),
      gaugeDataright: JSON.parse(JSON.stringify(gaugeData)),
      deviceInfo: '',
      dialogVisible:false,
      clickData:''
    }
  },
  created() {
    this.reloadWeb()
    this.initWebData()
  },
  methods:{

    bccelldblclick(data) {

      this.deviceInfo = ''
      this.gaugeDataleft.series[0].data[0].name = '主轴倍率'
      this.gaugeDataleft.series[0].data[0].value = 0
      this.gaugeDataleft.series[0].max = 200
      this.gaugeDataright.series[0].data[0].name = '进给倍率'
      this.gaugeDataright.series[0].data[0].value = 0
      this.gaugeDataright.series[0].max = 200

      this.dialogVisible = true
      this.searchNo = data
      this.searchDevice(data)
      this.timer = window.setInterval(() => {
        setTimeout(this.searchDevice(data), 0)
      }, 5000)
    },
    searchDevice(deviceNo) {
      queryDeviceFromSCADA(deviceNo).then((resp) => {
        this.deviceInfo = resp.data.data
        this.gaugeDataleft.series[0].data[0].name = '主轴倍率'
        this.gaugeDataleft.series[0].data[0].value = resp.data.data.fbearPer
        this.gaugeDataleft.series[0].detail.formatter = '{value}'
        this.gaugeDataright.series[0].data[0].name = '进给倍率'
        this.gaugeDataright.series[0].data[0].value = resp.data.data.floadPer
        this.gaugeDataright.series[0].detail.formatter = '{value}'
        this.basicLineData.title.text = '设备实时工作曲线'

        this.basicLineData.series[0].data = resp.data.data.fbearSpeedList
        this.basicLineData.legend.data[0] = '主轴转速'
        this.basicLineData.series[0].name = '主轴转速'
        this.basicLineData.series[0].itemStyle.normal.label.textStyle.color = '#71f604'


        this.basicLineData.series[1].data = resp.data.data.floadSpeedList
        this.basicLineData.legend.data[1] = '进给速度'
        this.basicLineData.series[1].name = '进给速度'
        this.basicLineData.series[1].itemStyle.normal.label.textStyle.color = '#f66904'
      })
    },
    handleClose() {
      window.clearInterval(this.timer) // 清理定时器
    },
    reloadWeb(){
      //每隔8小时刷新一下页面，防止卡死
      setTimeout(location.reload,1000*60*60*8)
    },
    initWebData(){
      connectWebsocket(
        // 测试地址
        process.env.VUE_APP_WS_URL+'/ScadaState/device',
        // 传递给后台的数据
        '5423',
        // 成功拿到后台返回的数据的回调函数
        (data) => {
          // console.log(JSON.parse(data))
          this.deviceData = JSON.parse(data)
        },
        // websocket连接失败的回调函数
        () => {
          sendMessage("im tird!")
        }
      );
    },
    getIco: function(type) {
      if (this.deviceData[type] === '1') {
        return 'running'
      } else if (this.deviceData[type] === '2') {
        return 'loading'
      } else if (this.deviceData[type] === '3') {
        return 'err'
      } else if (this.deviceData[type] === '4') {
        return 'shutdown'
      }  else {
        return 'loading'
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.container{
  background-image: url("../../../public/billboard.jpg");
  background-size: 100%;
  color: #FFFFFF;
  padding-top: 2vh;
}
.err{
  background-image: url("../../../public/hydraulicPress/presserr.png");
  background-size: 100%;
  height: 10vh;
  width: 5.5vw;
  margin: 0.57vw;
}
.running{
  background-image: url("../../../public/hydraulicPress/presswork.png");
  background-size: 100%;
  height: 10vh;
  width: 5.5vw;
  margin: 0.57vw;
}
.loading{
  background-image: url("../../../public/hydraulicPress/pressnoknow.png");
  background-size: 100%;
  height: 10vh;
  width: 5.5vw;
  margin: 0.57vw;
}
.shutdown{
  background-image: url("../../../public/hydraulicPress/pressdown.png");
  background-size: 100%;
  height: 10vh;
  width: 5.5vw;
  margin: 0.57vw;
}

</style>
